<template>
  <div>

    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/user' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/task' }">工作台</el-breadcrumb-item>
      <el-breadcrumb-item>工作日志</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">
      <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
      <el-row :gutter="20">
        <el-col :span="9">
          <!-- 3.定义搜索框 -->
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getLogList">
            <el-button slot="append" icon="el-icon-search" @click="getLogList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="14">
          <!-- 定义添加按钮-->
          <el-button type="primary" @click="dialogVisible = true;addLogBtn()" style="float: right">新建日志</el-button>
        </el-col>
      </el-row>

      <!-- 用户数据表格展现  border 边框线属性  -->
      <el-table :data="logList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="empId" label="上传人编号"></el-table-column>
        <el-table-column prop="empName" label="上传人"></el-table-column>
        <el-table-column prop="logDate" label="上传日期"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="success" icon="el-icon-view" size="small" @click="toViewLog(scope.row)">查看
              </el-button>
              <el-button type="primary" icon="el-icon-edit" size="small" @click="updateLogBtn(scope.row)">编辑
              </el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteLog(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="查看日志详情" :visible.sync="toViewLogDialogVisible" width="50%" center>
      <!-- 定义用户提交表单数据-->
      <el-form :model="viewLog" label-width="100px">
        <el-form-item label="员工编号" prop="username">
          <el-input v-model="viewLog.empId" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="viewLog.empName" disabled></el-input>
        </el-form-item>
        <el-form-item label="日志标题" prop="phone">
          <el-input v-model="viewLog.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="日志提交日期" prop="email">
          <el-input v-model="viewLog.logDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="日志内容" prop="email">
          <quill-editor v-model="viewLog.logContent" disabled></quill-editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toViewLogDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!--新建日志弹出框-->
    <el-dialog title="新建日志" :visible.sync="dialogVisible" width="50%" @close="closeDialog" center>
      <el-form :model="addLog" ref="addLogRef" label-width="100px">
        <el-form-item label="日志作者" prop="empName">
          <el-input v-model="addLog.empName" disabled></el-input>
        </el-form-item>
        <el-form-item label="员工编号" prop="empId">
          <el-input v-model="addLog.empId" disabled></el-input>
        </el-form-item>
        <el-form-item label="日志标题" prop="title">
          <el-input v-model="addLog.title"></el-input>
        </el-form-item>
        <el-form-item label="日志日期" prop="logDate">
          <el-date-picker v-model="addLog.logDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="日志详情" prop="logContent">
          <quill-editor ref="myQuillEditor" v-model="addLog.logContent"></quill-editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNewLog()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 定义修改页面 当对话框关闭时,将表格数据重置-->
    <el-dialog title="修改日志" center :visible.sync="updateDialogVisible" width="50%" @close="closeUpdateDialog">
      <!-- 定义用户提交表单数据-->
      <el-form :model="updateLogModel" ref="updateLogRef" label-width="100px">
        <el-form-item label="员工编号" prop="empId">
          <el-input v-model="updateLogModel.empId" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="empName">
          <el-input v-model="updateLogModel.empName" disabled></el-input>
        </el-form-item>
        <el-form-item label="日志标题" prop="title">
          <el-input v-model="updateLogModel.title"></el-input>
        </el-form-item>
        <el-form-item label="日志提交日期" prop="logDate">
          <el-date-picker v-model="updateLogModel.logDate" type="date" placeholder="选择日期" disabled>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="日志内容" prop="logContent">
          <quill-editor v-model="updateLogModel.logContent"></quill-editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateLog">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import moment from "moment";

export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5,
        empId: ''
      },
      empName: '',
      logList: [],
      total: 0,
      dialogVisible: false,
      addLog: {
        id: '',
        empName: '',
        title: '',
        logContent: '',
        logDate: '',
        empId: ''
      },
      viewLog: {},
      updateDialogVisible: false,
      toViewLogDialogVisible: false,
      updateLogModel: {}
    }
  },
  methods: {
    async getLogList() {
      const {data: res} = await this.$http.get("user/log/getOneselfList", {
        params: this.queryInfo
      }).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("查询个人日志失败")
      this.logList = res.data.rows
      this.total = res.data.total
    },

    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      this.getLogList()
    },

    handleCurrentChange(pageNum) {
      this.queryInfo.pageNum = pageNum
      this.getLogList()
    },

    closeDialog() {
      this.$refs.addLogRef.resetFields()
    },

    async addLogBtn() {
      this.addLog.empId = this.$cookies.get("empId")
      const res = await this.$http.get('user/log/getAuthorName?empId=' + this.addLog.empId).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("获取用户个人信息失败!")
      this.addLog.empName = res.data.data
    },
    async addNewLog() {
      const res = await this.$http.post("user/log/addNewLog", this.addLog).catch(
        function (e) {
          if (e.response.status === 500) {
            alert("服务器故障")
          } else if (e.response.status === 404) {
            alert("页面不存在")
          } else {
            alert("出错")
          }
        })
      if (res.status !== 200) return this.$message.error("添加日志失败")
      this.$message.success("新建日志成功")
      this.dialogVisible = false
      await this.getLogList()
      this.addLog = {}
    },

    async toViewLog(row) {
      this.viewLog = row
      this.toViewLogDialogVisible = true
    },

    async updateLogBtn(log) {
      const {data: res} = await this.$http.get("/user/log/getLogInfo", {params: log}).catch(
        function (e) {
          alert(e)
        })
      this.updateLogModel = res.data
      this.updateDialogVisible = true
    },

    closeUpdateDialog() {
      // 重置表格数据
      this.$refs.updateLogRef.resetFields()
    },

    async updateLog() {
      const {data: res} = await this.$http.put("/user/log/updateLogInfo", this.updateLogModel).catch(
        function (e) {
          alert(e.response.status)
        })
      if (res.status !== 200) return this.$message.error("更新失败")
      this.$message.success("更新成功")
      this.updateDialogVisible = false
      await this.getLogList()
    },

    async deleteLog(log) {
      const result = await this.$confirm('此操作将永久删除 ' + log.title + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      // 如果确认  confirm  如果取消 cancel
      if (result !== 'confirm') {
        return this.$message.info('删除取消')
      }
      const res = await this.$http.delete('user/log/deleteLog/' + log.id).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("删除失败")
      this.$message.success("删除成功")
      await this.getLogList()
    }
  },
  mounted() {
    this.queryInfo.empId = this.$cookies.get("empId")
    this.getLogList()
  }
}
</script>

<style lang="less" scoped>

</style>
